.section {
  display: flex;
  flex-direction: column;
  gap: var(--gap-xs);
}

.nav {
  z-index: 5;
  font: var(--font-bl-medium);
  color: var(--greyscale-text-negative);

  &.active {
    &::before {
      content: '';
      position: absolute;
      top: 0;
      right: 0;
      width: 4px;
      height: 100%;
      background-color: var(--greyscale-text-negative);
    }
  }

  &:hover {
    color: var(--primary-border-default);

    &::after {
      content: '';
      position: absolute;
      z-index: 1;
      top: 0;
      right: 0;
      width: 100%;
      height: 100%;
      opacity: 0.3;
      background-color: var(--greyscale-text-negative);
    }
  }
}

.default {
  font-size: var(--fs-sm);
  color: var(--greyscale-text-negative);

  &:hover {
    color: var(--primary-border-default);
  }

  &:focus-visible {
    outline: 1px solid var(--greyscale-text-negative);
    outline-offset: 3px;
  }
}

.menu-item {
  position: relative;
  z-index: 3;
  display: flex;
  gap: var(--gap-sm);
  align-items: center;
  padding: var(--gap-sm) var(--gap-main);
  transition: all 0.2s ease-in-out;
}

.title {
  color: var(--greyscale-text-negative);
}

.icon-wrapper {
  display: grid;
  place-content: center;
}

.icon {
  font-size: var(--fs-lg);
}

.label {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  width: 100%;
  -webkit-line-clamp: 1;
}

.count {
  margin: 0 auto;
  text-align: right;
}

.box {
  padding: 0 var(--gap-main);
}
